<%inherit file="base.html"/>

<%!
    from utils import translate_time_sec
%>

<%def name="main_panel()">
<div id="nav-panel" class="fleft">
    <div class="block">
        % if relays:
        <h3>${_("Servers")}</h3>
        % for relay in relays:
        <p><a class="relay-link" href="${relay.props.service_url}">${relay.props.name}</a>
        % if relay.props.is_ready:
        ${_("connected")}
        % elif relay.props.net_state == 1:
        ${_("authenticating")}
        % else:
        ${_("not connected")}
        % endif
        </p>
        % endfor
        % endif

        <h3>${_("Navigation")}</h3>
        <a href="/repos/download-tasks/">${_("Download Tasks")}</a>

    </div>
</div>

<div id="con-panel" class="fright">
    <div class="block">
        % if len(repos) == 0:
        <h3>${_("Four Steps to Use Seafile Client")}</h3>
        <ol>
            <li>${_("Log in to Seafile website, either our official website or your private website.")}</li>
            <li>${_("Create a library on Seafile website.")}</li>
            <li>${_("Download the library to a local folder.")}</li>
            <li>${_("Add files to the local folder and they will be uploaded automatically.")}</li>
        </ol>

        % else:
        <h3>${_("All Libraries")}</h3>
        <table class="repo-list">
            <tr>
                <th width="20%">${_("Name")}</th>
                <th width="30%">${_("Description")}</th>
                <th width="12%">${_("Server")}</th>
                <th width="15%">${_("Modify Time")}</th>
                <th width="9%">${_("State")}</th>
                <th width="14%">${_("Action")}</th>
            </tr>
            % for repo in repos:
            <tr>
                <td><a href="/repo/?repo=${repo.props.id}" class="repo-link">${ repo.props.name }</a>
                </td>
                <td>${ repo.props.desc }</td>
                <td>
                    % if repo.relay:
                    ${ repo.relay.name }
                    % endif
                </td>
                <td>
                    % if repo.props.last_modify:
                    % if repo.props.last_modify > 0:
                    ${repo.props.last_modify | translate_time_sec}
                    % else:
                    ${_("Unknown")}
                    % endif
                    % else:
                    ${_("Unknown")}
                    % endif
                </td>
                <td>
                    % if repo.sync_info and repo.local_branch:
                    % if repo.sync_info.props.head_commit == repo.local_branch.props.commit_id:
                    <span class="icon-ok" title="${_("Synchronized")}"></span>
                    % else:
                    <span class="icon-refresh" title="${_("Syncing")}"></span>
                    % endif
                    % endif
                </td>
                <td>
                    <span class="icon-folder-open-alt open-local-dir repo-op" title="${_("Open")}" data-url="/repos/operation/?repo=${repo.props.id}&op=open"></span>
                    <span class="icon-unlink repo-op unsync-repo" title="${_("Unsync")}" data-url="/repos/operation/?repo=${repo.props.id}&op=remove"></span>
                </td>
            </tr>
            % endfor
        </table>

        <div id="unsync-confirm" class="hide">
            <p><span class="ui-icon ui-icon-alert vam"></span><span class="vam">${_("Really want to unsync this library?")}</span></p>
            <button id="remove-repo-btn">${_("Unsync")}</button>
            <button class="simplemodal-close">${_("Cancel")}</button>
        </div>

        % endif
    </div>
</div>
</%def>

<%def name="js()">
<script type="text/javascript">
$('.open-local-dir').click(function() {
    location.href = $(this).data('url');    
});
$('.unsync-repo').click(function() {
    var url = $(this).data('url');
    $('#unsync-confirm').modal({appendTo: "#main", focus:false});
    $('#remove-repo-btn').click(function() {
        location.href = url;    
    });
});
</script>
</%def>
